<template>
  <div>
    <div class="BackgroundImg-box">
      <img src="@/assets/imgsrc/bg.png" alt="" />
      <!-- <img src="@/assets/imgsrc/avatar (1).png" alt="" > -->
      <div class="userBox" v-if="false">
        <div class="usreAvatar">
          <div class="userFrame">
            <img src="@/assets/imgsrc/avatar.png" alt="" />
          </div>
        </div>
        <p class="userNameBox" v-if="true">游客</p>
        <p class="userNameBox" v-else>用户名</p>
        <div class="loginBtn">
          <span class="btn-token" @click="loginUser" v-if="flag">登录</span>
          <span class="btn-token" @click="Logout" v-else>退出</span>
        </div>
      </div>
      <div class="userBox" v-else>
        <div class="usreAvatar">
          <div class="userFrame">
            <img src="@/assets/imgsrc/avatar.png" alt="" />
          </div>
        </div>
        <p class="userNameBox" v-if="true">{{ userName }}</p>
        <p class="userNameBox" v-else>用户名</p>
        <div class="loginBtn">
          <span class="btn-token" @click="loginUser" v-if="flag">登录</span>
          <span class="btn-token out" @click="Logout" v-else>退出</span>
        </div>
                  <div class="updateUser" v-show="!flag"><span class="updatetext">编辑个人资料</span><van-icon class="updateicon" name="play" /></div>
      </div>
    </div>
    <!--icon="star-o"
        text="文字" -->
    <van-grid :border="false" :column-num="3" class="van-grid-myList">
      <van-grid-item class="item-list-grid" @click="$router.push('/favorate')">
        <van-icon name="star-o" class="iconfont-user" />
        <p class="item-list-grid-text">我的收藏</p>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="wap-home-o" class="iconfont-user" @click="$router.push('/rent')"/>
        <p class="item-list-grid-text">我的出租</p>
      </van-grid-item>

      <van-grid-item>
        <van-icon name="clock-o" class="iconfont-user" />
        <p class="item-list-grid-text">看房记录</p>
      </van-grid-item>
      
      <van-grid-item>
        <van-icon name="paid" class="iconfont-user" />
        <p class="item-list-grid-text">成为房主</p>
      </van-grid-item>
      <van-grid-item>
        <!-- <van-icon name="star-o" class="iconfont-user" /> -->
        <span class="iconfont-user iconfont icon-ziyuan"></span>
        <p class="item-list-grid-text">个人资料</p>
      </van-grid-item>
      <van-grid-item>
        <van-icon name="service-o" class="iconfont-user" />
        <p class="item-list-grid-text">联系我们</p>
      </van-grid-item>
    </van-grid>

    <div class="footer-img">
      <img src="@/assets/imgsrc/join.png" alt="" class="footer-imgurl" />
    </div>
  </div>
</template>

<script>
import { getToken, removeToken } from '@/utils/storage'
import { user } from '@/api/Interface'
import { Dialog } from 'vant'

export default {
  data() {
    return {
      flag: true,
      userName: '游客',
    }
  },
  methods: {
    loginUser() {
      this.$router.push('/login')
    },
    Logout() {
      Dialog.confirm({
        title: '',
        message: '退出到登录页面',
      })
        .then(() => {
          removeToken()
          this.flag = true
          this.$toast('退出成功')
          location.reload()
        })
        .catch(() => {
          // on cancel
        })
    },
  },
  async created() {
    if (getToken()) {
      this.flag = false
      const userres = await user()
      this.userName = userres.body.nickname
      console.log(userres)
    } else {
      this.flag = true
    }
    // getToken() ? this.userName = localStorage.getItem('My_user_Name')
  },
}
</script>

<style scoped lang="less">
.BackgroundImg-box {
  position: relative;
  height: 300px;
  width: 100%;
  img {
    width: 100%;
  }

  .userBox {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 100;
    width: 318.75px;
    height: 161px;
    background-color: #fff;
    box-shadow: 0.66667vw -0.33333vw 7.66667vw 2.66667vw #ddd;
    .usreAvatar {
      position: absolute;
      top: -25%;
      left: 50%;
      transform: translate(-50%, 0%);
      background-color: #f5f5f5;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .userFrame {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
        }
      }
    }
    .userNameBox {
      margin-top: 40px;
      width: 100%;
      text-align: center;
    }
    .loginBtn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      .btn-token {
        display: block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        background-color: #21b97a;
        color: #fff;
        border: 1px solid rgba(red, green, blue, 0);
        margin-top: 10px;
      }
    }
  }
}
.van-grid-myList {
  margin-top: 10px;
  height: 190px;
}
.van-grid-myList {
  font-size: 13px;
  color: #333;
}
.van-grid-item {
  width: 33%;
  height: 95px !important;
}
.iconfont-user {
  font-size: 25px;
}
.item-list-grid-text {
  font-size: 13px;
  margin: 10px 0 0 0;
}
.footer-img {
  width: 348px;
  height: 84.88px;
  margin: auto;
}
.footer-imgurl {
  width: 100%;
}
.out{
  width: 54px !important;
  height: 20px !important;
  border-radius: 10px !important;
  text-align: center !important;
  line-height: 20px !important;
  font-size: 12px !important;
  margin: -10px 0 0 0 !important;
}
.updateUser{
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color:#999;
}
</style>
